
/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="openatc-serviceroute">
    <div class="funcs">
      <div class="title" style="display:flex;">{{this.menuDutyroute?this.menuDutyroute:$t('openatc.main.dutyroute')}}</div>
      <div class="btnGroup">
        <div class="btn-left">
            <el-button type="text" icon="el-icon-plus" slot="reference" class="btn" @click="onAddClick" ref="addbtn">
              {{ $t("openatc.common.add") }}
            </el-button>
            <el-button type="text" icon="el-icon-edit" slot="reference" class="btn" style="margin-left:10px;" @click="onEditClick" ref="addbtn">{{$t('openatc.common.edit')}}</el-button>
            <el-button type="text" icon="el-icon-delete" slot="reference" class="btn" @click="onDeleteClick" ref="addbtn">{{$t('openatc.common.delete')}}</el-button>
        </div>
        <div class="btn-right">
          <div class="editbtn">
            <el-button
              type="primary"
              size="small"
              class="btn"
              @click="onBatchClick"
              ref="batchbtn"
            >
              {{ $t("openatc.dutyroute.batchExecute") }}
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <el-container class="container">
      <el-aside width="180px">
        <PlanMenu
          :planData="planData"
          :zIndexObj="zIndexObj"
          ref="planMenu"
          @chooseRoute="chooseRoute"
          @research="research"
        />
      </el-aside>
      <el-main>
        <PlanContent
          ref="planContent"
          :schemeData="schemeData"
          :chooseId="chooseId"
          @onExecuteStateChange="onExecuteStateChange"
          @research="research"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script>
import PlanMenu from './planMenu'
import PlanContent from './planContent'
import { GetAllViproutes } from '../../api/service'
import { SystemconfigApi } from '../../api/systemconfig.js'
import '../../mock/index.js'
import { getMessageByCode } from '../../utils/responseMessage'
export default {
  name: 'Service',
  components: {
    PlanMenu,
    PlanContent
  },
  data () {
    return {
      editable: true,
      planData: [],
      menuDutyroute: '',
      chooseId: 0, // 选中的计划id
      loading: false
    }
  },
  computed: {
    route () {
      let res = this.planData.filter(ele => ele.id === this.chooseId)[0]
      return res
    }
  },
  mounted () {
    this.getAllPlan()
    this.getMemu()
  },
  methods: {
    getMemu () {
      let reqData = {
        module: 'menu',
        isValid: true
      }
      SystemconfigApi.GetSystemconfigList(reqData).then((data) => {
        let res = data.data
        if (!res.success) {
          console.log('datas:' + res)
          throw new Error('get JupyterUrl error')
        } else {
          for (let config of data.data.data) {
            if (config['key'] === 'dutyroute') {
              this.menuDutyroute = config['value']
            }
          }
        }
      })
    },
    async research (route) {
      let index = -1
      await this.getAllPlan()
      if (this.planData && this.planData.length === 0) {
        this.chooseId = 0
        return false
      }
      for (let i = 0; i < this.planData.length; i++) {
        let plan = this.planData[i]
        if (plan.id === route.id) {
          index = i
          break
        }
      }
      if (index === -1) {
        // this.planData.splice(index, 1, route)
        let plan = this.planData[this.planData.length - 1]
        if (plan) {
          route.id = plan.id
        }
      } else if (index > -1) {
        this.planData.splice(index, 1, route)
      } else {
        this.planData.splice(0, 0, route)
      }
      let planMenu = this.$refs.planMenu
      if (planMenu) {
        planMenu.chooseId = route.id
      }
    },
    onExecuteStateChange (val) {
      this.editable = !val
    },
    onBatchClick () {
      if (this.chooseId === 0) {
        this.$message({
          message: this.$t('openatc.dutyroute.nochooseplan'),
          type: 'warning'
        })
        return false
      }
      let palnContent = this.$refs.planContent
      if (palnContent) {
        palnContent.handleBatchExec()
      }
    },
    check () {
      let res = true
      if (this.chooseId === 0) {
        this.$message({
          message: this.$t('openatc.dutyroute.nochooseplan'),
          type: 'warning'
        })
        res = false
      }
      if (!this.editable) {
        this.$message({
          message: this.$t('openatc.dutyroute.notAllowedToEdit'),
          type: 'warning'
        })
        res = false
      }
      return res
    },
    onAddClick () {
      // this.chooseId = 0
      let palnContent = this.$refs.planContent
      if (palnContent) {
        palnContent.handleAdd()
      }
    },
    onEditClick () {
      if (!this.check()) {
        return false
      }
      let palnContent = this.$refs.planContent
      if (palnContent) {
        palnContent.handleEdit()
      }
    },
    onDeleteClick () {
      if (!this.check()) {
        return false
      }
      let palnContent = this.$refs.planMenu
      if (palnContent) {
        palnContent.onDelete()
      }
    },
    async getAllPlan () {
      this.loading = true
      await GetAllViproutes().then(res => {
        this.loading = false
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.planData = res.data.data
      })
    },
    chooseRoute (id) {
      this.chooseId = id
      this.editable = true
    }
  }
}
</script>
